<template>
  <div class="login-container">
    <div class="login-box">
      <switch-dark class="login-dark" />
      <div class="login-left">
        <img src="/static/img/side_bgi_low.jpg" />
      </div>
      <div class="login-content">
        <template v-if="!isSignUp && !isForgotPassword">
          <div class="info-qrcode">
            {{ accountLogin ? '邮箱登录' : '账号登录' }}
          </div>
          <img src="@/assets/image/login/qrcode-icon.png" class="qrcode" @click="handleClick" />
          <login-form
            v-if="accountLogin"
            @switch-mode="switchToSignUp"
            @forgot-password="switchToForgotPassword"
          />
          <login-email v-else />
        </template>
        <template v-else-if="isSignUp">
          <sign-up @switch-mode="switchToLogin" @register-success="handleRegisterSuccess" />
        </template>
        <template v-else-if="isForgotPassword">
          <forgot-password @switch-mode="switchToLogin" @reset-success="handleResetSuccess" />
        </template>

        <!-- 第三方登录 -->
        <div v-if="!isSignUp && !isForgotPassword" class="third-party-login">
          <div class="divider">
            <span class="divider-text">其他登录方式</span>
          </div>
          <div class="login-methods">
            <login-q-q />
            <login-github />
          </div>
        </div>

        <!-- ICP备案 -->
        <div v-if="!isSignUp && !isForgotPassword" class="icp-footer">
          <p>Copyright © 2024 - 2025 yunjian.ban All Rights Reserved. MonkeyK 版权所有</p>
          <p>辽ICP 备 2023009011号</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import SwitchDark from '@/components/SwitchDark/index.vue';
import { ref } from 'vue';
import ForgotPassword from './components/ForgotPassword.vue';
import LoginEmail from './components/LoginEmail.vue';
import LoginForm from './components/LoginForm.vue';
import LoginGithub from './components/LoginGithub.vue';
import LoginQQ from './components/LoginQQ.vue';
import SignUp from './components/SignUp.vue';

const accountLogin = ref<boolean>(true);
const isSignUp = ref<boolean>(false);
const isForgotPassword = ref<boolean>(false);

const handleClick = () => {
  if (!isSignUp.value && !isForgotPassword.value) {
    accountLogin.value = !accountLogin.value;
  }
};

const switchToSignUp = () => {
  isSignUp.value = true;
  isForgotPassword.value = false;
};

const switchToLogin = () => {
  isSignUp.value = false;
  isForgotPassword.value = false;
  accountLogin.value = true;
};

const switchToForgotPassword = () => {
  isForgotPassword.value = true;
  isSignUp.value = false;
};

const handleRegisterSuccess = () => {
  switchToLogin();
};

const handleResetSuccess = () => {
  switchToLogin();
};
</script>

<style lang="scss" scoped>
@use './index';
</style>
